<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>报价</title>


  <!-- Expand styles -->
  <link href="../css/app/app.css" rel="stylesheet">
  <link href="../css/app/default.css" rel="stylesheet">
  <link href="../css/mui/mui.css" rel="stylesheet">
  <link href="../css/mui/mui.picker.min.css" rel="stylesheet" />


  <!-- Custom styles for this template -->
  <!-- <link href="../css/iOS/mobile/mobile.css" rel="stylesheet"> -->
</head>

<body>

  <!-- header -->
  <div class="margin-b-60">
    <div class="list-group patient-list1 margin-b-i10">


      <div class="list-cell text-cell list-cell1">
        <div class="web-box1 list-left">机构机构名称</div>
        <div class="web-box2 nk-s text-right list-right" id="btn2">
          <div class="display-flex align-items-center justify-content-center">
            <input type="text" value="" id="tranSponsors" disabled>
            <!-- <span>请选择标签</span> -->
          </div>
        </div>
      </div>
      <div class="list-cell text-cell list-cell1">
        <div class="web-box1 list-left">机构地址</div>
        <div class="web-box2 nk-s text-right list-right" id="btn2">
          <div class="display-flex align-items-center justify-content-center">
            <input type="text" value="" id="tranAddressShow" disabled>
            <!-- <span>请选择标签</span> -->
          </div>
        </div>
      </div>




    </div>
    <div class="list-group patient-list1 margin-b-i10">
      <div class="list-cell text-cell list-cell1">
        <div class="web-box1 list-left">培训老师</div>
        <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入培训老师" id="teacher">
        </div>
      </div>
      <!-- <div class="price-diff"> -->
      <div class="list-cell text-cell">
        <div class="web-box1 list-left">培训费用</div>
        <div class="web-box2 nk-s text-right list-right display-flex">
          <input type="number" placeholder="请输入金额" id="price">
          <span class="padding-l-5 font-15 black">元</span>
        </div>
      </div>
      <!-- <p class="no-margin padding-t-5 margin-t-f5 padding-b-10">默认为0元，即免费，收费可设置5~30元之间的整数值</p> -->
      <!-- </div> -->

      <div class="list-cell text-cell list-cell1">
        <div class="web-box1 list-left">报价人员</div>
        <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入报价人员" id="persion">
        </div>
      </div>
      <div class="list-cell text-cell list-cell1">
        <div class="web-box1 list-left">联系电话</div>
        <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入联系电话" id="phone" disabled>
          
        </div>
        <span class="font-15 black margin-l-20 margin-r-20 w-50px edit-phone">修改</span>
      </div>

    </div>
    <div class="widget-default widget-body margin-b-10">

      <div class="web-box1 list-left font-15 black">报价备注</div>
      <div class="list-right">
        <textarea class="no-margin info-textarea" type="text" placeholder="请输入报价备注" id="details"></textarea>
      </div>

    </div>


  </div>
  <div class="save-btn hobby-footer1">
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block bc-head" onclick="submit()">提交报价</button>
  </div>

  <div class="dialog hide">
    <div class="mask"></div>
    <div class="dialog-content">
        <h3 class="title">请修改你的联系手机号码</h3>
        <p class="text">
            <input type="text" class="dialog-input" style="width: 100%;" placeholder="请输入您的手机号码" id="phoneNumber">
            <input type="text" class="dialog-input" style="width: 60%;" placeholder="请输入验证码" id="verifyCode">
            <button class="seed-btn">发送验证码</button>
        </p>
        <div class="btn-group">
            <div class="btn cancel-btn">取消</div>
            <div class="btn cancel-btn-save" style="color: #3F72FF;" >确定</div>
        </div>
    </div>
</div>
  
  <script src="../js/jquery.js"></script>
  <script src="../js/mui/mui.js"></script>
  <script src="../js/layer.js"></script>
  <script src="../js/app/app-base.js"></script>
  <script src="../js/app/app-url.js"></script>
  <script src="../js/app/app-ajax.js"></script>
  <script src="../js/dsbridge.js"></script>
  <script>
    var mWait = 60; //验证码等待时间
    var pWait = 0; //验证码当前时间
    var obj = {
      teacher: '',
      price: '',
      persion: '',
      phone: '',
      details: ''
    }
    var checking = {
      teacher: '培训老师',
      price: '培训费用',
      persion: '报价人员',
      phone: '联系电话',
    }

    function submit() {
      for (var key in obj) {
        var val = $("#" + key).val()
        if (isEmpty(val) && key in checking) {
          showToast("请输入" + checking[key]);
          return
        } else {
          obj[key] = val
        }
      }

      obj.userAccId = getUserId();
      obj.tranDemandId = getVal('tranDemand_Id');
      log(obj)
      getServerData(url_quotationInformationSave, obj);
    }

    $(document).ready(function () {
      var data = {
        userAccId: getUserId()
      }
      getServerData(url_trainorgmgr_getTrainOrganizationDetails, data);

      dsBridge.register('setTel', function (tel) {
          
          $("#phone").val(tel);
      })
 
    })

    function checkSMSVerifyCode(phoneNumber,verifyCode) {
            var data = {
                phoneNumber:phoneNumber,
                verifyCode:verifyCode
            }
            getServerData(url_checkSMSVerifyCode, data);

        }
        function sendVerifyCode() {
            var phoneNumber = $("#phoneNumber").val();
            if(isEmpty(phoneNumber)) {
                showToast("请输入手机号");
                return;
            }
            if (!checkPhone(phoneNumber)) {
                return;
            }
            var data = {
                phoneNumber:phoneNumber
            }
            getServerData(url_sendVerifyCode, data);
        }
        
        function saveVerifyCode() {
            var phoneNumber = $("#phoneNumber").val();
            var verifyCode =   $("#verifyCode").val();
            if(isEmpty(phoneNumber)) {
                showToast("请输入手机号");
                return;
            }
            if(isEmpty(verifyCode)) {
                showToast("请输入验证码");
                return;
            }

          

        }

    function getServerDataSuccess(url, data) {
      switch (url) {
        case url_checkSMSVerifyCode:
            $("#phone").val($("#phoneNumber").val());
            $('.dialog').addClass('hide')
            $("#phoneNumber").val('');
            $("#verifyCode").val('');
            break;
        case url_sendVerifyCode:
           verificationCodeTime();
            break;
        case url_quotationInformationSave:
          //保存
          //信息框
          layer.open({
            content: "报价提交成功，等待需求方选择！",
            btn: '我知道了',
            shadeClose: false,
            yes: function (index) {
              layer.close(index);
              dsBridge.call("saveClose", "");
            }
          });
          break;
          //培训机构详情
        case url_trainorgmgr_getTrainOrganizationDetails:
          var val = data.data;
          $('#tranSponsors').val(val.userName);
          $('#tranAddressShow').val(val.addressDetail);
          break;
      }
    }

    //修改手机号码
    $('.edit-phone').click(function () {
            $('.dialog').removeClass('hide')
        })
        $('.cancel-btn').click(function () {
            $('.dialog').addClass('hide')
            $("#phoneNumber").val('');
            $("#verifyCode").val('');
        })

        $('.cancel-btn-save').click(function () {
            var phoneNumber = $("#phoneNumber").val();
            var verifyCode =   $("#verifyCode").val();
            if(isEmpty(phoneNumber)) {
                showToast("请输入手机号");
                return;
            }
            if(isEmpty(verifyCode)) {
                showToast("请输入验证码");
                return;
            }
            checkSMSVerifyCode(phoneNumber,verifyCode);
        })

        function verificationCodeTime() {
            $(".seed-btn").css("background", "#777");
            pWait = mWait;
            var interval = setInterval(function () {
                if (pWait == 0) {
                    $('.seed-btn').html("发送验证码")
                    $(".seed-btn").css("background", "#3F72FF");
                    clearInterval(interval);
                } else {
                    $(".seed-btn").html(pWait + 's');
                    pWait--;
                }

            }, 1000);
        }

        $('.seed-btn').click(function () {

            if ($('.seed-btn').html() == '发送验证码') {
                sendVerifyCode();
            }
        })

  </script>

</body>

</html>